<template>
  <el-dialog class="ycy-dialog" v-model="visiable" draggable align-center append-to-body :modal="true">
    <template #header>
      <header class="ycy-dialog-header">
        <TitleText :title="title" />
        <section class="ycy-dialog-header-action">
          <slot name="header"></slot>
        </section>
      </header>
    </template>
    <slot></slot>
    <template #footer>
      <footer v-if="$slots.footer" class="ycy-dialog-footer">
        <slot name="footer"></slot>
      </footer>
      <footer v-else class="ycy-dialog-footer">
        <el-button @click="visiable = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="onSubmit">确 定</el-button>
      </footer>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, ref, watch } from 'vue';

// 还支持所有的el-dialog事件和参数，因为透传
const emits = defineEmits(['submit']); 
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  showFooterBtn: {
    type: Boolean,
    default: true
  },
});

const visiable = defineModel(false);
const submitLoading = ref(false);

watch(visiable, value => !value && (submitLoading.value = false))

const onSubmit = () => {
  submitLoading.value = true;
  emits('submit')
};
</script>

<style lang="scss" scoped>
.ycy-dialog {
  .ycy-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-action {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .ycy-dialog-footer {
    display: flex;
    justify-content: flex-end;
    row-gap: var(--ycy-gap-base);
  }
}
</style>